<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue';

import { IconifyIcon } from '@vben/icons';

import {
  Button,
  Card,
  Col,
  DatePicker,
  Form,
  FormItem,
  Input,
  message,
  Modal,
  Row,
  Select,
  SelectOption,
  Space,
  Table,
  Tag,
  Textarea,
} from 'ant-design-vue';
import dayjs from 'dayjs';

import StatisticsCard from '#/components/hotel/StatisticsCard.vue';

// 响应式数据
const loading = ref(false);
const showAddModal = ref(false);
const showDetailModal = ref(false);
const trendPeriod = ref('7');
const selectedInspection = ref<any>(null);

// 搜索表单
const searchForm = reactive({
  roomNumber: '',
  inspector: '',
  result: '',
  dateRange: null,
});

// 检查表单
const inspectionForm = reactive({
  roomNumber: '',
  inspector: '',
  standard: '',
  items: [],
  passed: true,
  remarks: '',
});

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number, range: [number, number]) =>
    `第 ${range[0]}-${range[1]} 条/共 ${total} 条`,
});

// 可用房间数据
const availableRooms = ref([
  { id: '101', roomNumber: '101' },
  { id: '102', roomNumber: '102' },
  { id: '201', roomNumber: '201' },
  { id: '202', roomNumber: '202' },
  { id: '301', roomNumber: '301' },
]);

// 可用标准数据
const availableStandards = ref([
  {
    id: '1',
    name: '定期清洁标准',
    items: [
      { name: '地面清洁', category: 'floor', score: 20 },
      { name: '卫生间清洁', category: 'bathroom', score: 25 },
      { name: '厨房清洁', category: 'kitchen', score: 20 },
      { name: '卧室整理', category: 'bedroom', score: 15 },
      { name: '客厅清洁', category: 'living', score: 10 },
      { name: '阳台清洁', category: 'balcony', score: 10 },
    ],
  },
  {
    id: '2',
    name: '退租清洁标准',
    items: [
      { name: '地面深度清洁', category: 'floor', score: 25 },
      { name: '卫生间深度清洁', category: 'bathroom', score: 30 },
      { name: '厨房深度清洁', category: 'kitchen', score: 25 },
      { name: '家具清洁', category: 'bedroom', score: 20 },
    ],
  },
]);

// 检查记录数据
const inspections = ref([
  {
    id: '1',
    roomNumber: '101',
    inspector: '质检员A',
    inspectionTime: dayjs().subtract(2, 'hour'),
    passed: true,
    score: 85,
    totalScore: 100,
    passRate: 85,
    standardName: '定期清洁标准',
    items: [
      {
        name: '地面清洁',
        category: 'floor',
        score: 20,
        actualScore: 18,
        result: 'passed',
        remarks: '清洁良好',
      },
      {
        name: '卫生间清洁',
        category: 'bathroom',
        score: 25,
        actualScore: 22,
        result: 'passed',
        remarks: '基本清洁',
      },
      {
        name: '厨房清洁',
        category: 'kitchen',
        score: 20,
        actualScore: 20,
        result: 'passed',
        remarks: '清洁到位',
      },
      {
        name: '卧室整理',
        category: 'bedroom',
        score: 15,
        actualScore: 15,
        result: 'passed',
        remarks: '整理整齐',
      },
      {
        name: '客厅清洁',
        category: 'living',
        score: 10,
        actualScore: 10,
        result: 'passed',
        remarks: '清洁良好',
      },
    ],
    remarks: '整体清洁质量良好，符合标准要求',
  },
  {
    id: '2',
    roomNumber: '201',
    inspector: '质检员B',
    inspectionTime: dayjs().subtract(4, 'hour'),
    passed: false,
    score: 65,
    totalScore: 100,
    passRate: 65,
    standardName: '退租清洁标准',
    items: [
      {
        name: '地面深度清洁',
        category: 'floor',
        score: 25,
        actualScore: 20,
        result: 'passed',
        remarks: '基本清洁',
      },
      {
        name: '卫生间深度清洁',
        category: 'bathroom',
        score: 30,
        actualScore: 15,
        result: 'failed',
        remarks: '清洁不彻底',
      },
      {
        name: '厨房深度清洁',
        category: 'kitchen',
        score: 25,
        actualScore: 20,
        result: 'partial',
        remarks: '部分清洁',
      },
      {
        name: '家具清洁',
        category: 'bedroom',
        score: 20,
        actualScore: 10,
        result: 'failed',
        remarks: '需要返工',
      },
    ],
    remarks: '卫生间和家具清洁不达标，需要重新清洁',
  },
]);

// 合格率趋势数据
const passRateData = ref([
  { date: '12-01', rate: 85 },
  { date: '12-02', rate: 88 },
  { date: '12-03', rate: 92 },
  { date: '12-04', rate: 87 },
  { date: '12-05', rate: 90 },
  { date: '12-06', rate: 93 },
  { date: '12-07', rate: 89 },
]);

// 统计信息
const statistics = computed(() => {
  const todayInspections = inspections.value.filter((i) =>
    dayjs(i.inspectionTime).isSame(dayjs(), 'day'),
  ).length;
  const passedInspections = inspections.value.filter((i) => i.passed).length;
  const failedInspections = inspections.value.filter((i) => !i.passed).length;
  const passRate =
    inspections.value.length > 0
      ? Math.round((passedInspections / inspections.value.length) * 100)
      : 0;

  return {
    todayInspections,
    passedInspections,
    failedInspections,
    passRate: `${passRate}%`,
  };
});

// 过滤后的检查记录
const filteredInspections = computed(() => {
  let result = inspections.value;

  if (searchForm.roomNumber) {
    result = result.filter((i) => i.roomNumber.includes(searchForm.roomNumber));
  }
  if (searchForm.inspector) {
    result = result.filter((i) => i.inspector.includes(searchForm.inspector));
  }
  if (searchForm.result) {
    const passed = searchForm.result === 'passed';
    result = result.filter((i) => i.passed === passed);
  }
  if (searchForm.dateRange && searchForm.dateRange.length === 2) {
    result = result.filter((i) => {
      const inspectionDate = dayjs(i.inspectionTime);
      return (
        inspectionDate.isAfter(searchForm.dateRange[0]) &&
        inspectionDate.isBefore(searchForm.dateRange[1])
      );
    });
  }

  return result;
});

// 计算属性
const totalScore = computed(() => {
  return inspectionForm.items.reduce((sum, item) => sum + item.score, 0);
});

const actualScore = computed(() => {
  return inspectionForm.items.reduce(
    (sum, item) => sum + (item.actualScore || 0),
    0,
  );
});

const passRate = computed(() => {
  if (totalScore.value === 0) return '0%';
  return `${Math.round((actualScore.value / totalScore.value) * 100)}%`;
});

// 表格列定义
const columns = [
  {
    title: '房间号',
    dataIndex: 'roomNumber',
    key: 'roomNumber',
    width: 100,
  },
  {
    title: '检查员',
    dataIndex: 'inspector',
    key: 'inspector',
    width: 120,
  },
  {
    title: '检查时间',
    dataIndex: 'inspectionTime',
    key: 'inspectionTime',
    width: 150,
    customRender: ({ text }: any) => formatDateTime(text),
  },
  {
    title: '检查结果',
    dataIndex: 'result',
    key: 'result',
    width: 100,
  },
  {
    title: '得分',
    dataIndex: 'score',
    key: 'score',
    width: 100,
  },
  {
    title: '合格率',
    dataIndex: 'passRate',
    key: 'passRate',
    width: 100,
    customRender: ({ text }: any) => `${text}%`,
  },
  {
    title: '操作',
    key: 'action',
    width: 200,
  },
];

// 检查项目详情表格列定义
const itemDetailColumns = [
  {
    title: '项目名称',
    dataIndex: 'name',
    key: 'name',
    width: 200,
  },
  {
    title: '分类',
    dataIndex: 'category',
    key: 'category',
    width: 100,
  },
  {
    title: '分值',
    dataIndex: 'score',
    key: 'score',
    width: 80,
  },
  {
    title: '实际得分',
    dataIndex: 'actualScore',
    key: 'actualScore',
    width: 100,
  },
  {
    title: '结果',
    dataIndex: 'result',
    key: 'result',
    width: 100,
  },
  {
    title: '备注',
    dataIndex: 'remarks',
    key: 'remarks',
    width: 200,
  },
];

// 工具函数
const getCategoryText = (category: string) => {
  const categoryMap: Record<string, string> = {
    floor: '地面',
    bathroom: '卫生间',
    kitchen: '厨房',
    bedroom: '卧室',
    living: '客厅',
    balcony: '阳台',
  };
  return categoryMap[category] || category;
};

const getResultText = (result: string) => {
  const resultMap: Record<string, string> = {
    passed: '通过',
    failed: '不通过',
    partial: '部分通过',
  };
  return resultMap[result] || result;
};

const getResultColor = (result: string) => {
  const colorMap: Record<string, string> = {
    passed: 'success',
    failed: 'error',
    partial: 'warning',
  };
  return colorMap[result] || 'default';
};

const getPassRateColor = (rate: number) => {
  if (rate >= 90) return '#52c41a';
  if (rate >= 80) return '#faad14';
  return '#ff4d4f';
};

const formatDateTime = (datetime: any) => {
  return datetime ? dayjs(datetime).format('YYYY-MM-DD HH:mm') : '';
  datetimedayjs.format;
};

// 事件处理函数
const handleSearch = () => {
  pagination.current = 1;
  console.log('搜索条件:', searchForm);
};

const handleReset = () => {
  Object.assign(searchForm, {
    roomNumber: '',
    inspector: '',
    result: '',
    dateRange: null,
  });
  pagination.current = 1;
};

const handleTableChange = (pag: any) => {
  pagination.current = pag.current;
  pagination.pageSize = pag.pageSize;
};

const handleViewRoom = (record: any) => {
  message.info(`查看房间：${record.roomNumber}`);
};

const handleView = (record: any) => {
  selectedInspection.value = record;
  showDetailModal.value = true;
};

const handleEdit = (record: any) => {
  message.info('编辑功能开发中...');
};

const handleReinspect = (record: any) => {
  message.success(`已安排复检：${record.roomNumber}`);
};

const handleStandardChange = (standardId: string) => {
  const standard = availableStandards.value.find((s) => s.id === standardId);
  if (standard) {
    inspectionForm.items = standard.items.map((item) => ({
      ...item,
      result: 'passed',
      actualScore: item.score,
      remarks: '',
    }));
  }
};

const updateItemResult = (index: number, result: string) => {
  inspectionForm.items[index].result = result;
  if (result === 'failed') {
    inspectionForm.items[index].actualScore = 0;
  } else if (result === 'passed') {
    inspectionForm.items[index].actualScore = inspectionForm.items[index].score;
  }
};

const updateItemScore = (index: number, score: number) => {
  inspectionForm.items[index].actualScore = score;
};

const updateItemRemarks = (index: number, remarks: string) => {
  inspectionForm.items[index].remarks = remarks;
};

const handleSave = () => {
  if (
    !inspectionForm.roomNumber ||
    !inspectionForm.inspector ||
    !inspectionForm.standard
  ) {
    message.error('请填写完整的检查信息');
    return;
  }

  if (inspectionForm.items.length === 0) {
    message.error('请选择检查标准');
    return;
  }

  message.success('质量检查创建成功');
  showAddModal.value = false;
  handleCancel();
};

const handleCancel = () => {
  Object.assign(inspectionForm, {
    roomNumber: '',
    inspector: '',
    standard: '',
    items: [],
    passed: true,
    remarks: '',
  });
  selectedInspection.value = null;
};

// 初始化
onMounted(() => {
  console.log('清洁质量检查页面已加载');
});
</script>

<template>
  <div class="cleaning-inspection">
    <div class="page-header">
      <h2>清洁质量检查</h2>
      <Button type="primary" @click="showAddModal = true">
        <IconifyIcon icon="ant-design:plus-outlined" />
        新建检查
      </Button>
    </div>

    <!-- 搜索表单 -->
    <Card :bordered="false" class="search-card">
      <Form :model="searchForm" layout="inline">
        <FormItem label="房间号">
          <Input
            :value="searchForm.roomNumber"
            placeholder="请输入房间号"
            style="width: 120px"
            @input="(e) => (searchForm.roomNumber = e.target.value)"
          />
        </FormItem>
        <FormItem label="检查员">
          <Input
            :value="searchForm.inspector"
            placeholder="请输入检查员"
            style="width: 120px"
            @input="(e) => (searchForm.inspector = e.target.value)"
          />
        </FormItem>
        <FormItem label="检查结果">
          <Select
            :value="searchForm.result"
            placeholder="请选择结果"
            style="width: 120px"
            allow-clear
            @change="(value) => (searchForm.result = value)"
          >
            <SelectOption value="passed">通过</SelectOption>
            <SelectOption value="failed">不通过</SelectOption>
          </Select>
        </FormItem>
        <FormItem label="检查日期">
          <DatePicker.RangePicker
            :value="searchForm.dateRange"
            style="width: 240px"
            @change="(value) => (searchForm.dateRange = value)"
          />
        </FormItem>
        <FormItem>
          <Button type="primary" @click="handleSearch">
            <IconifyIcon icon="ant-design:search-outlined" />
            搜索
          </Button>
          <Button @click="handleReset" style="margin-left: 8px">
            <IconifyIcon icon="ant-design:reload-outlined" />
            重置
          </Button>
        </FormItem>
      </Form>
    </Card>

    <!-- 统计卡片 -->
    <Row :gutter="16" class="statistics-row">
      <Col :span="6">
        <StatisticsCard
          title="今日检查"
          :value="statistics.todayInspections"
          color="#1890ff"
          icon="ant-design:audit-outlined"
        />
      </Col>
      <Col :span="6">
        <StatisticsCard
          title="检查通过"
          :value="statistics.passedInspections"
          color="#52c41a"
          icon="ant-design:check-circle-outlined"
        />
      </Col>
      <Col :span="6">
        <StatisticsCard
          title="检查不通过"
          :value="statistics.failedInspections"
          color="#ff4d4f"
          icon="ant-design:close-circle-outlined"
        />
      </Col>
      <Col :span="6">
        <StatisticsCard
          title="合格率"
          :value="statistics.passRate"
          color="#722ed1"
          icon="ant-design:percentage-outlined"
        />
      </Col>
    </Row>

    <!-- 质量趋势图 -->
    <Card :bordered="false" class="chart-card">
      <template #title>
        <span>质量趋势</span>
        <Select
          :value="trendPeriod"
          style="width: 120px; margin-left: 16px"
          @change="(value) => (trendPeriod = value)"
        >
          <SelectOption value="7">近7天</SelectOption>
          <SelectOption value="30">近30天</SelectOption>
          <SelectOption value="90">近90天</SelectOption>
        </Select>
      </template>
      <div class="trend-chart">
        <div class="chart-item">
          <div class="chart-title">合格率趋势</div>
          <div class="chart-content">
            <div
              v-for="(item, index) in passRateData"
              :key="index"
              class="chart-bar"
            >
              <div class="bar-label">{{ item.date }}</div>
              <div class="bar-container">
                <div
                  class="bar-fill"
                  :style="{
                    height: `${item.rate}%`,
                    backgroundColor: getPassRateColor(item.rate),
                  }"
                ></div>
              </div>
              <div class="bar-value">{{ item.rate }}%</div>
            </div>
          </div>
        </div>
      </div>
    </Card>

    <!-- 检查记录列表 -->
    <Card :bordered="false" class="table-card">
      <Table
        :columns="columns"
        :data-source="filteredInspections"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'roomNumber'">
            <Button type="link" @click="handleViewRoom(record)">
              {{ record.roomNumber }}
            </Button>
          </template>
          <template v-else-if="column.key === 'result'">
            <Tag :color="record.passed ? 'success' : 'error'">
              {{ record.passed ? '通过' : '不通过' }}
            </Tag>
          </template>
          <template v-else-if="column.key === 'score'">
            <div class="score-info">
              <span class="score-value">{{ record.score }}</span>
              <span class="score-total">/ {{ record.totalScore }}</span>
            </div>
          </template>
          <template v-else-if="column.key === 'action'">
            <Space>
              <Button type="link" size="small" @click="handleView(record)">
                查看
              </Button>
              <Button type="link" size="small" @click="handleEdit(record)">
                编辑
              </Button>
              <Button type="link" size="small" @click="handleReinspect(record)">
                复检
              </Button>
            </Space>
          </template>
        </template>
      </Table>
    </Card>

    <!-- 新建检查弹窗 -->
    <Modal
      :open="showAddModal"
      title="新建质量检查"
      width="800px"
      @ok="handleSave"
      @cancel="handleCancel"
    >
      <Form :model="inspectionForm" layout="vertical">
        <Row :gutter="16">
          <Col :span="12">
            <FormItem label="检查房间" name="roomNumber" required>
              <Select
                :value="inspectionForm.roomNumber"
                placeholder="请选择房间"
                style="width: 100%"
                show-search
                @change="(value) => (inspectionForm.roomNumber = value)"
              >
                <SelectOption
                  v-for="room in availableRooms"
                  :key="room.id"
                  :value="room.roomNumber"
                >
                  {{ room.roomNumber }}
                </SelectOption>
              </Select>
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="检查员" name="inspector" required>
              <Input
                :value="inspectionForm.inspector"
                placeholder="请输入检查员姓名"
                @input="(e) => (inspectionForm.inspector = e.target.value)"
              />
            </FormItem>
          </Col>
        </Row>
        <FormItem label="检查标准" name="standard" required>
          <Select
            :value="inspectionForm.standard"
            placeholder="请选择检查标准"
            style="width: 100%"
            @change="(value) => handleStandardChange(value)"
          >
            <SelectOption
              v-for="standard in availableStandards"
              :key="standard.id"
              :value="standard.id"
            >
              {{ standard.name }}
            </SelectOption>
          </Select>
        </FormItem>
        <FormItem label="检查项目" name="items">
          <div class="inspection-items">
            <div
              v-for="(item, index) in inspectionForm.items"
              :key="index"
              class="inspection-item"
            >
              <Row :gutter="8">
                <Col :span="8">
                  <div class="item-name">{{ item.name }}</div>
                  <div class="item-category">
                    {{ getCategoryText(item.category) }}
                  </div>
                </Col>
                <Col :span="4">
                  <div class="item-score">分值: {{ item.score }}</div>
                </Col>
                <Col :span="4">
                  <Select
                    :value="item.result"
                    placeholder="结果"
                    style="width: 100%"
                    @change="(value) => updateItemResult(index, value)"
                  >
                    <SelectOption value="passed">通过</SelectOption>
                    <SelectOption value="failed">不通过</SelectOption>
                    <SelectOption value="partial">部分通过</SelectOption>
                  </Select>
                </Col>
                <Col :span="4">
                  <Input
                    :value="item.actualScore"
                    placeholder="实际得分"
                    type="number"
                    :max="item.score"
                    @input="
                      (e) => updateItemScore(index, parseInt(e.target.value))
                    "
                  />
                </Col>
                <Col :span="4">
                  <Input
                    :value="item.remarks"
                    placeholder="备注"
                    @input="(e) => updateItemRemarks(index, e.target.value)"
                  />
                </Col>
              </Row>
            </div>
          </div>
        </FormItem>
        <Row :gutter="16">
          <Col :span="12">
            <FormItem label="总分" name="totalScore">
              <Input :value="totalScore" disabled style="width: 100%" />
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="实际得分" name="actualScore">
              <Input :value="actualScore" disabled style="width: 100%" />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col :span="12">
            <FormItem label="合格率" name="passRate">
              <Input :value="passRate" disabled style="width: 100%" />
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="检查结果" name="passed">
              <Select
                :value="inspectionForm.passed"
                placeholder="请选择结果"
                style="width: 100%"
                @change="(value) => (inspectionForm.passed = value)"
              >
                <SelectOption :value="true">通过</SelectOption>
                <SelectOption :value="false">不通过</SelectOption>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <FormItem label="检查备注" name="remarks">
          <Textarea
            :value="inspectionForm.remarks"
            placeholder="请输入检查备注"
            :rows="3"
            @input="(e) => (inspectionForm.remarks = e.target.value)"
          />
        </FormItem>
      </Form>
    </Modal>

    <!-- 检查详情弹窗 -->
    <Modal
      :open="showDetailModal"
      title="检查详情"
      width="800px"
      :footer="null"
    >
      <div v-if="selectedInspection" class="inspection-detail">
        <Row :gutter="16">
          <Col :span="12">
            <div class="detail-section">
              <h4>基本信息</h4>
              <div class="detail-item">
                <span class="label">房间号：</span>
                <span class="value">{{ selectedInspection.roomNumber }}</span>
              </div>
              <div class="detail-item">
                <span class="label">检查员：</span>
                <span class="value">{{ selectedInspection.inspector }}</span>
              </div>
              <div class="detail-item">
                <span class="label">检查时间：</span>
                <span class="value">{{
                  formatDateTime(selectedInspection.inspectionTime)
                }}</span>
              </div>
              <div class="detail-item">
                <span class="label">检查结果：</span>
                <span class="value">
                  <Tag :color="selectedInspection.passed ? 'success' : 'error'">
                    {{ selectedInspection.passed ? '通过' : '不通过' }}
                  </Tag>
                </span>
              </div>
            </div>
          </Col>
          <Col :span="12">
            <div class="detail-section">
              <h4>评分信息</h4>
              <div class="detail-item">
                <span class="label">总分：</span>
                <span class="value">{{ selectedInspection.totalScore }}分</span>
              </div>
              <div class="detail-item">
                <span class="label">实际得分：</span>
                <span class="value">{{ selectedInspection.score }}分</span>
              </div>
              <div class="detail-item">
                <span class="label">合格率：</span>
                <span class="value">{{ selectedInspection.passRate }}%</span>
              </div>
              <div class="detail-item">
                <span class="label">检查标准：</span>
                <span class="value">{{ selectedInspection.standardName }}</span>
              </div>
            </div>
          </Col>
        </Row>
        <div class="detail-section">
          <h4>检查项目</h4>
          <Table
            :columns="itemDetailColumns"
            :data-source="selectedInspection.items"
            :pagination="false"
            size="small"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'category'">
                <Tag color="blue">{{ getCategoryText(record.category) }}</Tag>
              </template>
              <template v-else-if="column.key === 'result'">
                <Tag :color="getResultColor(record.result)">
                  {{ getResultText(record.result) }}
                </Tag>
              </template>
            </template>
          </Table>
        </div>
        <div v-if="selectedInspection.remarks" class="detail-section">
          <h4>检查备注</h4>
          <div class="detail-item">
            <span class="value">{{ selectedInspection.remarks }}</span>
          </div>
        </div>
      </div>
    </Modal>
  </div>
</template>

<style scoped>
.cleaning-inspection {
  padding: 16px;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.page-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
}

.search-card {
  margin-bottom: 24px;
}

.statistics-row {
  margin-bottom: 24px;
}

.chart-card {
  margin-bottom: 24px;
}

.table-card {
  margin-bottom: 24px;
}

.trend-chart {
  padding: 16px 0;
}

.chart-item {
  margin-bottom: 24px;
}

.chart-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #1f2937;
}

.chart-content {
  display: flex;
  align-items: end;
  gap: 16px;
  height: 200px;
}

.chart-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.bar-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}

.bar-container {
  width: 40px;
  height: 150px;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.bar-fill {
  position: absolute;
  bottom: 0;
  width: 100%;
  transition: height 0.3s ease;
}

.bar-value {
  font-size: 12px;
  color: #666;
  margin-top: 8px;
}

.score-info {
  display: flex;
  align-items: center;
  gap: 4px;
}

.score-value {
  font-weight: 600;
  color: #1890ff;
}

.score-total {
  color: #666;
}

.inspection-items {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  padding: 16px;
  max-height: 400px;
  overflow-y: auto;
}

.inspection-item {
  padding: 12px;
  background: #fafafa;
  border-radius: 4px;
  margin-bottom: 12px;
}

.inspection-item:last-child {
  margin-bottom: 0;
}

.item-name {
  font-weight: 500;
  color: #1f2937;
  margin-bottom: 4px;
}

.item-category {
  font-size: 12px;
  color: #666;
}

.item-score {
  font-size: 12px;
  color: #666;
}

.inspection-detail {
  max-height: 600px;
  overflow-y: auto;
}

.detail-section {
  margin-bottom: 24px;
}

.detail-section h4 {
  margin-bottom: 12px;
  color: #1f2937;
  font-weight: 600;
}

.detail-item {
  display: flex;
  margin-bottom: 8px;
  align-items: center;
}

.detail-item .label {
  width: 100px;
  color: #666;
  font-weight: 500;
}

.detail-item .value {
  flex: 1;
  color: #1f2937;
}

:deep(.ant-table-thead > tr > th) {
  font-weight: 600;
  background-color: #fafafa;
}
</style>
